<template>
	<view>
		<view class="status_bar01"></view>
		<view class="header">
			<view class="more iconfont" @tap="backPage">&#xe8c8;</view>
			<view class="search">
			<view class="icon iconfont">&#xe605;</view>
				<input type="text" v-model="kw" placeholder="搜索社区店" @confirm="search" confirm-type="search"/>
			</view>
			<!-- <view class="go" data-url="/pages/personal/station/record" @click="gotopage">录入站点</view> -->
		</view>
		
		<view class="clear_box01"></view>
		
		
		<block v-for="(item, index) in info" :key="index">
			<view class="station_list">
				<view class="text_box">
					<view class="name">{{item.name}}</view>
					<view class="address">{{item.address}}</view>
					<view class="phone">{{item.phone}}</view>
				</view>
				<view class="menu_box">
					<view class="phone iconfont22" @tap="callPhone(item.phone)">&#xe797;</view>
					<view class="go iconfont22" :data-lat="item.lat" :data-long="item.lng" @tap="goShopLocation">&#xe622;</view>
				</view>
			</view>
		</block>


		<view style="height: 250rpx;width: 100%;"></view>
		<view class="confirm06 footer_btn" data-url="/pages/personal/station/record" @click="gotopage">录入社区店</view>
	</view>
</template>

<script>
export default {
	data() {
		return {	
			flg:false,
			kw:'',
			info:[
				
			]
			
		};
	},
	onLoad(e) {
		var that = this;
			that.Net._get('fwlist',{},(res)=>{
				if(res.code ==1){
				that.info=res.data
				}
			});
			that.Net._get('smshcx',{},(res)=>{
				if(res.code ==1){
			     if(res.data.ss==1 )that.flg=true
			
				}
			});
	},
	methods: {
		gotopage(e) {
			if(!this.flg)
			{
			uni.showToast({
						title:'请先成为社区店长',
						icon:"none"
					})
						return
			}
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
		goShopLocation(e) {
			var that = this;
			const latitude = e.currentTarget.dataset.lat;
			const longitude = e.currentTarget.dataset.long;
			parseFloat()
			uni.openLocation({
				latitude: parseFloat(latitude),
				longitude: parseFloat(longitude),
				success: function() {
					 console.log('success');
				},
				fail(rew) {
					console.log(rew);
				}
			});
		},
		callPhone(e) {
			uni.makePhoneCall({
				phoneNumber: e
			});
		},
		search(){
			var that = this;
			if(!that.kw)
			{
				uni.showToast({
			 				title:'请输入要查找的内容',
			 				icon:"none"
			 			})
						return
			}
			
				that.Net._get('fwlist',{kw:that.kw},(res)=>{
					if(res.code ==1){
						if(res.data.length<1)
						{
							uni.showToast({
										title:'没有查找到相应的服务站',
										icon:"none"
									})
						}
						else
						{
							that.info=res.data
						}
					
					}
				});
		},
		backPage() {
			uni.navigateBack();
		},

	}
};
</script>

<style>
.clear_box08 {
	width: 100%;
	/* height: calc(140px + var(--status-bar-height)); */
}

.header {
	width: 100%;
	height: 50px;
	display: flex;
	position: fixed;
	top: var(--status-bar-height);
	/* background-image: linear-gradient(#4d726f, #b4eef7); */
	background-color: #4d726f;
	z-index: 9999;
}

.header .location_box {
	height: 50px;
	width: 70px;
	display: flex;
	margin-right: 10px;
}

.header .location_box .location {
	font-size: 14px;
	color: #fff;
	line-height: 50px;
	margin-right: 5px;
	margin-left: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.header .location_box .arrow {
	font-size: 10px;
	color: #666;
	line-height: 50px;
}

.header .search {
	flex: 1;
	height: 30px;
	margin-top: 10px;
	display: flex;
	background-color: #fff;
	border-radius: 30px;
	margin-right: 4%;
}

.header .search .icon {
	font-size: 14px;
	color: #666;
	line-height: 30px;
	margin-left: 10px;
}

.header .search input {
	font-size: 12px;
	color: #333;
	height: 30px;
	line-height: 30px;
	margin-left: 10px;
	flex: 1;
}

.header .more {
	width: 30px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	color: #fff;
}

.header .go {
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 3.2vw;
	color: #fff;
	padding: 0 3vw;
}

.station_list{
	width: 92%;
	margin: 4% auto 0;
	background-color: #fff;
	border-radius: 2vw;
	box-sizing: border-box;
	padding: 3vw;
	display: flex;
}

.station_list .text_box{
	flex: 1;
}

.station_list .text_box .name{
	font-size: 4.2vw;
	color: #333;
	font-weight: bold;
}

.station_list .text_box .address{
	font-size: 3.7vw;
	color: #666;
	margin-top: 1vw;
}

.station_list .text_box .phone{
	font-size: 3.7vw;
	color: #666;
	margin-top: 1vw;
}

.station_list .menu_box{
	width: 20vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.station_list .menu_box .phone{
	margin: 0 auto;
	box-sizing: border-box;
	font-size: 7vw;
	height: 100%;
	color: #ff231c;
	display: flex;
	align-items: center;
	justify-content: center;
}

.station_list .menu_box .go{
	margin: 0 auto;
	box-sizing: border-box;
	font-size: 8vw;
	height: 100%;
	color: #ff231c;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer_btn{
	width: 80%;
	left: 10%;
}

</style>
